<template>
  <div>
    <nav-tab class="nav-tab-show">
      <div slot="left" class="tab-left" @click="backHome">
        <i class="fas fa-angle-double-left"></i>
      </div>
      <div slot="center" class="tab-center">
      <div  v-for="(item,index) in title" :class="{isActive:currentIndex===index}"
      @click="active(index)"
      >{{item}}</div>
      </div>>
    </nav-tab>
  </div>
</template>

<script>
  import NavTab from "../../../components/common/navtab/NavTab";
  export default {
    name: "DetaiilTabBar",
    components: {NavTab},
    data(){
      return{
        title:['商品','详情','介绍','生产'],
        currentIndex: 0
      }
    },
    methods:{
      backHome(){
        this.$router.back()
      },
      active(index){
         this.currentIndex=index
        this.$emit('turnFourClick',index)

      },

    }
  }
</script>

<style scoped>
  .tab-center{

    display: flex;
  }
  .tab-center div{

    flex:1;
  }
  .nav-tab-show{
    font-size: 20px;
    background-color: silver;
  }
  .tab-left,.isActive{
    color: deeppink;
  }



</style>